<template>
  <div
    class="tool-complex tool-card-overflow-hidden"
    :style="{
      background: attr.background,
      borderColor: attr.borderColor,
      borderWidth: `${attr.borderWidth}px`,
    }"
  >
    <div class="pointer-events-none">
      <div class="kanban">
        <img
          src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          draggable="false"
        />
      </div>
    </div>
    <div
      class="clip-item"
      :style="{
        clip: `rect(auto, ${left}px, auto, auto)`,
      }"
    >
      <div class="kanban">
        <img
          draggable="false"
          src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"
        />
      </div>
    </div>
    <!-- :style="{
        left: `${left}px`,
      }" -->
    <div
      class="handle-container"
      id="handle-container"
      style="left: 0px"
      v-drage
    >
      <div
        style="
          position: absolute;
          height: 100%;
          transform: translateX(-50%);
          pointer-events: all;
        "
      >
        <div class="project-handle">
          <div class="relative">
            <span>
              <svg
                t="1686706895180"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3205"
                width="200"
                height="200"
              >
                <path
                  d="M589.019141 143.276171L589.019141 880.723829 958.709995 512.004093zM434.980859 880.723829l0-737.447658-369.68983 368.727922z"
                  p-id="3206"
                  fill="#ffffff"
                ></path>
              </svg>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-card-overflow-hidden",
  mixins: [mixins],
  directives: {
    drage: {
      bind(el, binding, vnode) {
        let that = vnode.context;
        let zoom = that.zoom; // 缩放比例
        el.onmousedown = (e) => {
          // 获取到的值带px 正则匹配替换
          let styLeft = el.style.left.replace(/px/g, "");
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX;
          document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离
            const moveX = e.clientX - disX + parseInt(styLeft) * zoom;
            // 移动当前元素
            const left = moveX / zoom;
            el.style.left = `${left}px`;
            that.left = left;
            // 将此时的位置传出去
            // binding.value(left);
          };

          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  data() {
    return {
      left: 0,
      attr: null,
    };
  },
  pageData: {
    version: "0.0.2",
    name: "tool-card-overflow-hidden",
    title: "对照展示",
    count: 0,
    width: 1100,
    height: 700,
    config: {
      label: "对照展示",
      active: [],
      attr: [
        // {
        //   key: "linearGradient",
        //   title: "", // 渐变色
        //   hidden: false,
        //   formType: "color-linear-gradient",
        //   group: "linear-gradient",
        //   type: "Object",
        //   data: {
        //     type: "linear-gradient",
        //     angle: 45,
        //     colors: ["#409eff", "#0967F2"],
        //   },
        // },
        // {
        //   key: "borderColor",
        //   title: "边框颜色",
        //   formType: "color-picker",
        //   group: "basics",
        //   type: "String",
        //   data: "#ddd",
        // },
        // {
        //   key: "background",
        //   title: "背景颜色",
        //   formType: "color-picker",
        //   group: "basics",
        //   type: "String",
        //   data: "#fff",
        // },
      ],
    },
  },
};
</script>

<style scoped lang="scss">
.tool-complex {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  background-color: #fff;
  transition: all 0.58s;
}

.tool-card-overflow-hidden {
  border-radius: 4px;
  overflow: hidden;
}

.pointer-events-none {
  width: 100%;
  height: 100%;
  background: orange;
}

.clip-item {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  will-change: clip;
  user-select: none;
  background: #2c7ef8;
  clip: rect(auto, 0px, auto, auto);
}

.kanban {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 100%;
  opacity: 1;
  border: 0px;
  margin: 0px;
  padding: 0px;
  position: relative;
  max-width: 100%;

  & img {
    width: 100%;
    height: 100%;
  }
}

.handle-container {
  position: absolute;
  top: 0px;
  left: 210px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  //   transform: translate3d(210px, 0px, 0px);

  .project-handle {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    cursor: grab;

    &:before {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      width: 2px;
      height: 100%;
      background-color: #2c7ef8;
    }

    .relative {
      position: relative !important;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

      & span {
        display: inline-block;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        background: #2c7ef8;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
      .icon {
        width: 80%;
      }
    }
  }
}
</style>
